<!--
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <title>HTML5手机端拍照上传</title>
    <style>
        .list_box {
            display: -webkit-box;
            width: 90%;
            margin: 0px auto;
            border: 1px solid silver;
            padding: 3px;
            border-radius: 2px;
        }
        .list {
            width: 30%;
            height: 100px;
            border: 1px solid salmon;
            margin-left: 2%;
            display: block;
            border:1px solid #4cd964;
            border-radius: 2px;
            background-size:100% 100%;
            background-position: center center;
            background-repeat: no-repeat;
        }
        .list input {
            width: 100%;
            height: 100%;
            opacity: 0;
        }
        input[type='submit']{
            border: none;border-radius: 2px;
            padding: 6px 22px;
            display: block;
            margin: 10px auto;
            color: white;
            background: #008000;
        }
    </style>
</head>
<body>
<form method="" action=""  enctype="multipart/form-data" role="form">
    <div class="list_box">
        <a class="list" id="img0" href="javascript:;">
            <input type="file" name="file1" accept="image/*" capture="camera" onchange="showImg(this)" />
        </a>
        <a class="list" id="img1" href="javascript:;">
            <input type="file" name="file2" accept="image/*" capture="camera" onchange="showImg(this)" />
        </a>
        <a class="list" id="img2" href="javascript:;">
            <input type="file" name="file3" accept="image/*" capture="camera" onchange="showImg(this)" />
            &lt;!&ndash;accept="image/*" capture="camera"&ndash;&gt;
        </a>
    </div>
    <input type="submit" name="" id="btn" value="提交" />
</form>
<script>
    function showImg(e) {
        var srcs0 = window.URL.createObjectURL(e.files[0]);
        var index = e.parentNode.id;
        if(srcs0){
            $('#'+index+'').css({"background":"url(" + srcs0 + ") center no-repeat","background-size": "100% 100%"});
        }
    }

    $("#btn").click(function(){
        $("#btn").css({"opacity":"0.8","disabled":"disabled"});
        $("#btn").val("正在提交,请耐心等待.....");
        var formData = new FormData($("form")[0]);
        $.ajax({
            url:"/sys/common/upload",
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function (res) {
               console.log(res);
            }
        });
    });
</script>
</body>
</html>-->


<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手机端拍照测试</title>
    <style>
        .camera,#btn{
            display: inline-block;font-size: 1rem;line-height: 2.4;padding: 0 1em;
            background-color: orangered;color: white;
        }
        .camera input{display: none;}
        #btn{display: none;float: right;}
    </style>
</head>

<body>
<p>
    <!-- 录像：<input type="file" accept="video/*" capture="camera"> -->
</p>
<p>
    <label class="camera">拍照<input type="file" accept="image/*" capture="camera" id="file_input"></label>
    <button id="btn" onclick="upfile()">确定</button>
</p>
<div id="result"></div>
<script>
    var result = document.getElementById("result");
    var input = document.getElementById("file_input");
    var btn = document.getElementById("btn");

    if (typeof FileReader === 'undefined') {
        result.innerHTML = "抱歉，你的浏览器不支持预览图片！";
        input.setAttribute('disabled', 'disabled');
    } else {
        input.addEventListener('change', readFile, false);
    }


    function readFile() {
        var file = this.files[0];
        if (!/image\/\w+/.test(file.type)) {
            alert("非图像类型文件");
            return false;
        }
        var reader = new FileReader();
        reader.readAsDataURL(file);

        reader.onload = function (e) {
            result.innerHTML = '<img width="100%" src="' + this.result + '" alt=""/>';
            btn.style.display="block";
        }
    }

    function upfile() {
        var formData = new FormData();
        formData.append('file', input.files[0]);
        // 原生Ajax
        var xhr = new XMLHttpRequest();
        // xhr.responseType = "json";
        xhr.overrideMimeType("application/json");
        xhr.open('POST', '/sys/common/upload', true)
        xhr.onloadend = function (e) {
            console.log(xhr.response, '---', xhr.responseText);
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                var data = JSON.parse(xhr.response);
                console.log(data)
                alert("图片上传成功")
            } else {
                console.log('错误' + xhr.status)
                alert("图片上传失败！")
            }
        };
        xhr.onerror = function (e) {
            console.log("错误", e);
            alert("图片上传错误！")
        };
        xhr.send(formData);
    }
</script>
</body>

</html>
